<template>
  <div :class="['contanier', customClass]">
    <div
      v-for="(item, index) in list"
      :key="index"
      :class="[
        'list-item',
        customItemClass,
        (index + 1) === Number(selectIndex) ? active : '',
      ]"
      @click="onClick(index+1,item)"
    >
      <span>{{ item[keyName] }}</span>
    </div>
    <slot name="slot-container"></slot>
  </div>
</template>
<script>
export default {
  name: "data-v-segment",
  props: {
    customClass: {
      type: String,
      default: "",
    },
    customItemClass: {
      type: String,
      default: "",
    },
    active: {
      type: String,
      default: "",
    },
    list: {
      type: Array,
      default: () => [],
    },
    keyName: {
      type: String,
      default: "",
    },
    defaultIndex: {
      type:Number | String,
      default: 1,
    },
  },
  data() {
    return {
      selectIndex:this.defaultIndex
    };
  },
  methods:{
    onClick(index,item){
      this.selectIndex = index;
      // console.log("index",index);
      this.$emit('customClick',{index,item})
    }
  }
};
</script>
<style src='./index.css' scoped></style>